<template>
  <canvas ref="qrcode"></canvas>
</template>
<script>
import Qrious from 'qrious'

export default {
  name: 'QrCode',

  components: {},

  props: {
    background: {
      // 背景颜色
      type: String,
      default: '#ffffff',
    },
    backgroundAlpha: {
      type: Number,
      default: 1.0,
    },
    foreground: {
      // 前景颜色
      type: String,
      default: '#000000',
    },
    foregroundAlpha: {
      type: Number,
      default: 1.0,
    },
    level: {
      // 误差校正级别(L, M, Q, H)
      type: String,
      default: 'Q',
    },
    mine: {
      // 输出为图片时的MIME类型
      type: String,
      default: 'image/png',
    },
    padding: {
      type: Number,
      default: null,
    },
    size: {
      // 尺寸，单位像素
      type: Number,
      default: 100,
    },
    value: {
      // 编码为二维码的值
      type: String,
      required: true,
    },
    // 中间图标的URL地址
    imageUrl: {
      type: String,
      default: null,
    },
    imageSize: {
      type: Number,
      default: 20,
    },
    imagePadding: {
      type: Number,
      default: 6,
    },
  },

  data() {
    return {
      qrious: null,
    }
  },

  computed: {
    position() {
      return (this.size - this.imageSize) / 2
    },
  },

  watch: {
    level() {
      this.init()
    },
    value() {
      this.init()
    },
    imageUrl() {
      this.initImage()
    },
  },

  created() {},

  mounted() {
    var element = this.$refs.qrcode
    this.qrious = new Qrious({ element })
    this.init()
  },

  methods: {
    init() {
      this.qrious.set({
        background: this.background,
        backgroundAlpha: this.backgroundAlpha,
        foreground: this.foreground,
        foregroundAlpha: this.foregroundAlpha,
        level: this.level,
        mime: this.mime,
        padding: this.padding,
        size: this.size,
        value: this.value,
      })

      // 中间图片
      this.initImage()
    },

    initImage() {
      if (this.imageUrl) {
        this.loadImage()
      }
    },

    loadImage() {
      var image = new Image()
      image.src = this.imageUrl

      if (image.complete) {
        this.drawImage(image)
      } else {
        image.onload = () => {
          this.drawImage(image)
        }
        image.onerror = () => {
          console.error('加载图片失败')
        }
      }
    },

    drawImage(image) {
      const element = this.$refs.qrcode
      var ctx = element.getContext('2d')
      // var pattern = ctx.createPattern(image, 'no-repeat')

      // 画圆角
      // var r = 4
      // var x = this.position
      // var w = this.imageSize
      // var s = x + w
      // ctx.beginPath()
      // ctx.moveTo(x + r, x)
      // ctx.arcTo(s, x, s, s, r)
      // ctx.arcTo(s, s, x, s, r)
      // ctx.arcTo(x, s, x, x, r)
      // ctx.arcTo(x, x, s, x, r)
      // ctx.closePath()

      // 画边框
      ctx.strokeStyle = this.background
      ctx.lineWidth = this.imagePadding
      ctx.strokeRect(this.position, this.position, this.imageSize, this.imageSize)

      // 填充图像
      // ctx.fillStyle = pattern
      // ctx.fill()

      ctx.drawImage(image, this.position, this.position, this.imageSize, this.imageSize)
    },

    getDataURL() {
      return this.qrious.toDataURL()
    },
  },
}
</script>
<style scoped></style>
